<template>
    <div>
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item class="iconfont" title="订单详情" name="1">
                <div class="one_columns">
                    <h2>商品信息</h2>
                    <div>
                        <span><img src="../assets/logo.png" alt=""></span>
                        <span>1期1栋1单元12楼1201室（蓝光COCO ）</span>
                        <div>蓝光coco</div>
                    </div>
                </div>
                <div class="two_columns">
                    <h2>订单信息</h2>
                    <div>
                        <ul>
                            <li><span style="text-align-last: justify ;">下单用户</span>:<span>{{getData.user.user_name}}</span></li>
                            <li><span style="text-align-last: justify ;">下单状态</span>:<span>{{getData.orders_status}}</span></li>
                            <li><span style="text-align-last: justify ;">下单时间</span>:<span>{{getData.orders_time}}</span></li>
                            <li><span style="text-align-last: justify ;">流水号</span>:<span>{{getData.serial_no}}</span></li>
                        </ul>
                        <ul>
                            <li><span style="text-align-last: justify ;">订单号</span>:<span>{{getData.orders_no}}</span></li>
                            <li><span style="text-align-last: justify ;">订单总额</span>:<span>{{getData.orders_total}}</span></li>
                            <li><span style="text-align-last: justify ;">付款方式</span>:<span>{{getData.payment_method}}</span></li>
                            <li><span style="text-align-last: justify ;">付款时间</span>:<span>{{getData.payment_time}}</span></li>
                        </ul>
                    </div>
                </div>
                <div class="two_columns">
                    <h2>买家信息</h2>
                    <div>
                        <ul>
                            <li><span style="text-align-last: justify ;">用户账号</span>:<span>{{getData.user.user_id}}</span></li>
                            <li><span style="text-align-last: justify ;">联系电话</span>:<span>{{getData.user.user_iphone}}</span></li>
                        </ul>
                        <ul>
                            <li><span style="text-align-last: justify ;">真实姓名</span>:<span>{{getData.user.user_name}}</span></li>
                            <li><span style="text-align-last: justify ;">证件号码</span>:<span>{{getData.user.user_card}}</span></li>
                        </ul>
                    </div>
                </div>
                
            </el-collapse-item>           
            <el-collapse-item class="iconfont" title="退款记录" name="2">
                <div class="two_columns">
                    <h2>发起退款</h2>
                    <div>
                        <ul>
                            <li><span style="text-align-last: justify ;">申请账号</span>:<span>{{getData.refund.user_id}}</span></li>
                            <li><span style="text-align-last: justify ;">申请时间</span>:<span>{{getData.refund.application_time}}</span></li>
                            <li><span style="text-align-last: justify ;">退款形式</span>:<span>{{getData.payment_method}}</span></li>
                        </ul>
                        <ul>
                            <li><span style="text-align-last: justify ;">退款单号</span>:<span>{{getData.refund.chargeback_no}}</span></li>
                            <li><span style="text-align-last: justify ;">退款理由</span>:<span>{{getData.refund.refund_reason}}</span></li>
                        </ul>
                    </div>
                </div>
                 
            </el-collapse-item>
            
           
        </el-collapse>
    </div>
</template>

<script>
import '../assets/font_wsx/iconfont.css'

export default {
    name:'RefundDetails',
    data() {
      return {
        activeNames: ['1','2']
      };
    },
    methods: {
      handleChange(val) {
        console.log(val);
      }
    },
    computed: {
        getData(){
            return this.$store.state.RefundData.RefundDetailsData
        }
    },

}
</script>

<style lang='less'>
.el-collapse{
    width: 100%;
}
// .is-active {
    
//     background-color: hotpink;
// }
.one_columns{
    h2{ 
        padding: 5px 0;
        padding-left: 30px;    
        font-size: 16px;
        font-weight: 500;
        margin: 0 !important;
    }
    
    div{
        font-size: 18px;
        line-height: center;
        span{
            display: inline-block;
            height: 30px;
            margin: auto;
            margin-left: 50px;
            img{
                width: 50px;
            }
        }
        div{
            height: 30px;
            margin-top: 20px;
            margin-right: 100px;
            float: right;
        }
    }
    
}
.two_columns{
    h2{ 
        padding: 5px 0;
        padding-left: 30px;
        font-size: 16px;
        font-weight: 500;
        margin: 0 !important;
    }
    div{
        &:after{
            content: "";
            display: block;
            clear: both;
        }
        ul{
            padding-left: 50px;
            box-sizing: border-box;
            float: left;
            width: 50%;
            li{
                text-align-last: justify !important;
                list-style: none;
                span{
                    &:nth-of-type(1){
                        margin-right: 5px;
                        display: inline-block;
                        width: 70px;
                    }
                    &:nth-of-type(2){
                        display: inline-block;
                        padding-left: 10px;
                        
                    }

                }
            }
        }
    }
}
.el-collapse-item__header{
    &::before{
        content: '\e610';
        margin-right: 5px;
    }
    font-size: 20px;
    background-color:  #63b7af;
    // background-color: #F2F2F2;
    padding-left: 5px;
    
}
.el-collapse-item__content{
   background-color: #FBFBFB;
//    background-color: #333;

}
.el-collapse-item__content h2{
    // background-color:white;
    background-color:#e9eef3;
}


</style>